<template>
  <div class="channel-config">
    <el-table
      ref="tableRef"
      :data="channels"
      border
      style="width: 100%"
      row-key="name"
      @selection-change="handleTableSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="排序" width="60">
        <template #default>
          <el-icon class="sort-icon" :size="18">
            <Sort />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="通道名称" />
      <el-table-column prop="min" label="最小值" />
      <el-table-column prop="max" label="最大值" />
      <el-table-column prop="unit" label="单位" />
      <el-table-column label="颜色">
        <template #default="scope">
          <div
            class="color-block"
            :style="{ backgroundColor: scope.row.color }"
          ></div>
          <el-color-picker
            v-model="scope.row.color"
            size="small"
            @change="handleColorChange(scope.row, $event)"
          />
        </template>
      </el-table-column>
      <el-table-column label="图表类型" width="120">
        <template #default="scope">
          <el-select
            v-model="scope.row.type"
            size="small"
            style="width: 80px"
            @change="handleTypeChange(scope.row)"
          >
            <el-option label="线图" value="line" />
            <el-option label="点图" value="bar" />
          </el-select>
        </template>
      </el-table-column>
    </el-table>

    <div class="config-actions">
      <el-button @click="handleConfirm" type="primary">
        确认配置
      </el-button>
      <el-button @click="handleReset">
        重置
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, nextTick, computed } from 'vue'
import type { Channel } from '@/types/chart'
import { Sort } from '@element-plus/icons-vue'

interface Props {
  channels: Channel[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  confirm: [channels: Channel[]]
  colorChange: [channel: Channel, color: string]
  typeChange: [channel: Channel]
  selectionChange: [channel: Channel]
  reset: []
}>()

const tableRef = ref()

// 处理表格选择变化  
const handleTableSelectionChange = (selectedRows: Channel[]) => {
  console.log('表格选择发生变化:', selectedRows.map(r => r.name))

  // 直接更新所有通道的选中状态
  props.channels.forEach(channel => {
    channel.selected = selectedRows.some(row => row.name === channel.name)
  })
}

// 处理颜色变化
const handleColorChange = (channel: Channel, color: string) => {
  channel.color = color
  emit('colorChange', channel, color)
}

// 处理图表类型变化
const handleTypeChange = (channel: Channel) => {
  emit('typeChange', channel)
}

// 确认配置
const handleConfirm = () => {
  emit('confirm', props.channels.filter(ch => ch.selected))
}

// 重置配置
const handleReset = () => {
  console.log('执行重置操作')

  // 重置为默认选中状态：只选中X1工支、X2非支、导高、磨耗
  props.channels.forEach(channel => {
    if (channel.name === 'X1工支' || channel.name === 'X2非支' || channel.name === '导高' || channel.name === '磨耗') {
      channel.selected = true
    } else {
      channel.selected = false
    }
  })

  // 清空表格选择后重新设置
  tableRef.value?.clearSelection()
  nextTick(() => {
    props.channels.forEach(channel => {
      if (channel.selected) {
        tableRef.value?.toggleRowSelection(channel, true)
      }
    })

    // 重置后自动确认配置
    console.log('重置后自动确认配置，选中的通道:', props.channels.filter(ch => ch.selected).map(ch => ch.name))
    handleConfirm()
  })

  emit('reset')
}

// 初始化表格选择状态
onMounted(() => {
  nextTick(() => {
    console.log('初始化表格选择状态')
    props.channels.forEach(channel => {
      console.log(`设置通道 ${channel.name} 选择状态:`, channel.selected)
      if (channel.selected) {
        tableRef.value?.toggleRowSelection(channel, true)
      }
    })
  })
})
</script>

<style scoped>
.channel-config {
  padding: 20px;
}

.color-block {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  vertical-align: middle;
}

.sort-icon {
  cursor: pointer;
  color: #909399;
}

.sort-icon:hover {
  color: #409eff;
}

.config-actions {
  margin-top: 20px;
  text-align: center;
}

.config-actions .el-button {
  margin: 0 10px;
}
</style>